
<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:小说 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->







<template>
	<view class="content">
		<view class="box">
			<view class="box-content">
				<view class="box-h-img">
					<image :src="info.cover" mode=""></image>
				</view>
				<view class="book-cell">
					<view class="b-title">{{info.name}}</view>

					<viw class="b-score">{{info.share_num?info.share_num:0}}人评过</viw>
					<view class="b-fenl"><text v-for="item in info.type_name">{{item}}</text></view>
					<!-- <view class="b-lianzai ">218万字</view> -->
				</view>
				<view class="publish" style="margin-left: 22rpx;" @click="bookMore()">立即阅读 </view>
			</view>
			<view class="b-Introduction">
				{{info.description}}
			</view>
			<view class="fl-introduction">
				<text>分类: </text><text class="fl-subtitle" v-for="item in info.type_name">{{item}}</text>
			</view>
			<view class="review">
				<view>
					书评
				</view>
					<view>
						<!-- <view class="review-btn" @click="showBok">
							加入书架
						</view> -->
						<view class="review-btn" @click="showBok">
							写书评
						</view>
					</view>
			</view>

		</view>
		<view class="list-box" v-for=" (item,index) in bookList">
			<view class="list-item">
				<view class="list-item-img">
					<image :src="item.user.avatar"></image>
					<view>{{item.user.nickname}}</view>
				</view>
				<view class="list-item-info">{{item.content}}</view>
				 <view class="list-item-time">
					  <view class="">{{item.created_at}}</view>
					  <view class=""></view>
				 </view>
			</view>
		</view>
		<view class="foot-pop" v-if="show2">
			<view class="p-box">
				<view class="rite">
					<view style="position: absolute;left: 60rpx;" @click.stop="hidePop">
						<u-icon name="arrow-down" size="36"></u-icon>
					</view>
					<view>
						写书评
					</view>
				</view>
				<view class="pingfen">
					<input type="text" placeholder="请尊重他人 友好评论" v-model="form.contents">
				</view>
				<view class="stars">
					评分: <u-rate :count="count" v-model="start" activeColor="#FEDE3D"></u-rate>
				</view>
				<view class="submit">
					<view>好好写书评哦</view>
					<view class="publish" @click="addBookcom">发表</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBookcom,
		addBookcom,
		getBookdetis,
		bookInfo
	} from '@/common/api.js'
	export default {

		data() {
			return {
				count: 5,
				start: 2,
				show2: false,
				bookList:"",//评论列表
				info: "",
				form: {
					module_id: "1",
					book_id: 1,
					contents: "",
				},
				id: '',
				//书评参数
				bookParameters: {
					module_id: 1,
					book_id: 1,
					order: "",
					page: 1,
				}

			};
		},
		onLoad(option) {
			this.id = option.id;
			this.bookParameters.book_id=this.id;
			this.form.book_id=this.id;
			this.writeChapter(this.id);
		},
		onShow() {
			this.getBookcom();
		},
		methods: {

		
			showBok() {
				this.show2 = true
			},
			hidePop() {
				this.show2 = false

			},
			bookMore(e) {

				uni.navigateTo({
					url: '/pages/novel/book?id=' + this.id

				});
			},
			writeChapter(id) {
				var data = {
					module_id:1,
					book_id: id
				}
				bookInfo(data).then(res => {
					this.info = res.data[0];
				
				})
			},
			//添加评论
			addBookcom() {
				addBookcom(this.form).then(res => {
					if(res.code==200){
						uni.showToast({
										title: '添加评论成功 请等待审核通过',
										icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
										duration: 2000    //持续时间为 2秒
									}) 
							this.show2=false;
					}
				 
				})
			},
			//获取评论列表
			getBookcom() {
				getBookcom(this.bookParameters).then(res => {
					this.bookList=res.data
				})
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.content{
		margin-top: 30rpx;
	}

	.foot-pop {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(1, 1, 1, .8);
	}
	.list-box{
		// margin-top: 30rpx;
		margin-bottom: 60rpx;
	}

	.list-item-img {
		font-size: 24rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

	.list-item-info {
		margin-top: 20rpx;
		// padding-left: 20rpx;
		// padding-right: 30rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}
	.list-item-time{
		font-size: 24rpx;
		color: #666;
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
	}

	.list-item-img image {
		width: 50rpx;
		height: 50rpx;
		// border: 1rpx solid #ccc;
		border-radius: 50%;
		margin-right: 10rpx;
	
	}

	.publish {
		display: inline-block;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// width: 120rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
		background-color: #FEDE3D;
	}

	.submit {
		margin-top: 10rpx;
		color: #BB8B4A;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
		padding-right: 30rpx;
		justify-content: space-between;
	}

	.p-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 30rpx;
		background-color: #fff;

		.rite {
			font-size: 35rpx;
			text-align: center;
			margin-bottom: 30rpx;
			font-weight: bold;
		}

		.stars {
			margin-top: 20rpx;
			margin-left: 30rpx;
		}
	}

	.pingfen {
		padding-top: 10rpx;
		padding: 10rpx;
		width: 90%;
		height: 300rpx;
		border: 1rpx solid #333;
		margin: 0 auto;
	}

	.content {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 50rpx;

		.fl-introduction {
			margin-top: 20rpx;
			padding-top: 30rpx;
			// border-top: 1rpx solid #F2F2F2;
			font-size: 32rpx;
			color: #333;

			font-weight: bold;
		}

		.review {
			border-top: 1rpx solid #F2F2F2;
			margin-top: 20rpx;
			color: #1F1F1F;
			height: 100rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;

			align-items: center;

			.review-btn {
				border-radius: 30rpx;
				height: 60rpx;
				width: 120rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				text-align: center;
				background-color: #FEDE3D;
			}
		}

		.fl-subtitle {
			color: #666;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 30rpx;
		}

		.b-Introduction {
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 34rpx;
			position: relative;
			overflow: hidden;
			color: #33373d;
			margin-left: 20rpx;
			padding-right: 20rpx;
			text-align: justify;
			border-top: 1rpx solid transparent;
			border-bottom: 1rpx solid transparent;
		}

		.box-content {
			display: flex;
		}

		.book-cell {
			line-height: 50rpx;
		}

		.box-h-img {
			width: 200rpx;
			height: 240rpx;
			margin-right: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.b-title {
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>
